<template>
  <a-tree-select
    v-model="val"
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="treeData"
    placeholder="请选择"
    tree-default-expand-all
    allow-clear
  >
  </a-tree-select>
</template>

<script>
const treeData = [
  {
    title: "Node1",
    value: "0-0",
    children: [
      {
        title: "Child Node1",
        value: "0-0-1",
      },
      {
        title: "Child Node2",
        value: "0-0-2",
      },
    ],
  },
  {
    title: "Node2",
    value: "0-1",
  },
];
export default {
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {
      type: [String, Number],
    },
  },
  data() {
    return {
      val: undefined,
      treeData,
    };
  },
  watch: {
    val(val) {
      this.$emit("change", val);
    },
    value: {
      handler(newVal) {
        this.val = newVal;
      },
      immediate: true,
    },
  },
};
</script>
